/*
 * @Author: yuanxiang 
 * @Date: 2018-05-09 16:01:50 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2018-10-08 15:14:57
 */
<template>
    <div class="components-container" >
        <div class='chart-container'>
            <el-row :gutter="20" style="padding-bottom:40px">
                <el-col :xs="24" :sm="24" :md="24" :lg="10">
                     <p class="z_topTitleCon">
                        <span class="z_topTitle">{{'板块合伙人'+'('+ range +')'}}</span>
                        <el-date-picker :editable="false" :clearable="false" @change="dateChange()" v-model="month" type="month" placeholder="选择月" class='week-con'></el-date-picker>
                    </p>
                    <el-table :data="partnerData" border height="495" :row-style="{height:'3.0938rem'}" style="width: 100%;font-size:1.1rem">
                        <el-table-column   prop="plateName" align="center" label-class-name="tableLableHeihht" label="板块">
                        </el-table-column>
                        <el-table-column  align="center" prop="newlyAddNum" label-class-name="tableLableHeihht" label="上周新增人数">
                        </el-table-column>
                        <el-table-column  prop="cumulativeNum" align="center" label-class-name="tableLableHeihht" label="累计发展人数">
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="14">
                    <div v-if="emptyData"  class="tableCon">
                        <p style=" padding: 10px 0 24px 0;" class="z_topTitleCon">
                             <span class="z_topTitle">板块合伙人发展明细</span>
                        </p>
                        <chart class="chartCon" ref="chart1" :option="partnerOption" />
                    </div>
                    <div  v-else class="tableCon">
                        <p style=" padding: 10px 0 24px 0;" class="z_topTitleCon">
                             <span class="z_topTitle">板块合伙人发展明细</span>
                        </p>
                        <el-row  :gutter="20" style="padding:59px  8px 10px 0;text-align: center;height:429px;background:#252733;">
                            <span class="el-table__empty-text" style="font-size:1.1rem">暂无数据</span>
                        </el-row>                        
                    </div>
                    
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import chart from "../../../../../components/Charts/chart";
import echarts from "echarts";
export default {
  data() {
    return {
      pickerOption: {
        firstDayOfWeek: 1
      },
      week: new Date(),
      partnerOption: {},
      partnerData: [],
      month: new Date(),
      emptyData: true,
      range: "",
      chartsColor: {}
    };
  },
  components: { chart },
  methods: {
    dateChange() {
      this.emptyData = true;
      this.fetchData();
    },
    onclick() {
      this.$refs.chart1.onclick();
    },
    setPartnerOption() {
      var data = this.solveParnerData();
      var option = {};

      // option.color = [ '#3398DB','#ef5c4c']
      option.grid = { top: "2%", left: "12%" };
      (option.tooltip = {
        trigger: "axis",
        // formatter: "{a} <br/>{b} :{d}%",
        textStyle: {
          color: this.chartsColor.text,
          fontSize: this.$utils.xyText
        }
      }),
        (option.xAxis = [
          {
            type: "value",
            name: "人",
            nameTextStyle: {
              color: this.chartsColor.text,
              fontSize: this.$utils.xyText
            },
            axisLabel: {
              textStyle: {
                color: this.chartsColor.text,
                fontSize: this.$utils.xyText
              }
            }
            // min:20
          }
        ]),
        (option.yAxis = {
          type: "category",
          data: data.xAlisData,
          nameTextStyle: {
            fontSize: this.$utils.xyText,
            color: this.chartsColor.text
          },
          axisLabel: {
            textStyle: {
              color: this.chartsColor.text,
              fontSize: this.$utils.xyText
            }
          }
        }),
        (option.legend = {
          bottom: "1%",
          data: ["累计数量", "新增数量"],
          textStyle: {
            color: this.chartsColor.text,
            fontSize: this.$utils.xyText
          }
        });
      option.series = data.series;
      this.partnerOption = option;
      this.$refs.chart1.initChart();
    },
    changedate() {
      console.log(this.week);
    },
    fetchData() {
      var month = new Date(this.month).getMonth() + 1;
      var year = new Date(this.month).getFullYear();
      var allDays = new Date(year, month, 0).getDate();
      var endTime = year + "-" + month + "-" + allDays;
      var startTime = year + "-" + month + "-" + "1";
      var days = new Date(this.month).getDate();
      this.range = this.$utils.getWeek(month, days).range;
      var url = this.$api.PartnerDevelopStatistics;
      var d = {
        beginTime: startTime,
        endTime: endTime
      };
      this.$fetch({
        url,
        method: "post",
        data: this.$qs.stringify(d)
      })
        .then(resData => {
          this.partnerData = resData.data.result;
          if (this.partnerData <= 0) {
            this.partnerData = [];
            this.emptyData = false;
          } else {
            this.emptyData = true;
          }
          this.setPartnerOption();
        })
        .catch(err => {
          console.log(err);
        });
    },
    solveParnerData() {
      var solveData = {};
      var data = this.partnerData;
      var xAlisData = [];
      var yData = [];
      var value = []; //value
      var series = [];
      var seriesItem1 = {};
      var seriesItem2 = {};
      var newNum = [];
      data.forEach(item => {
        xAlisData.push(item.plateName);
        yData.push(item.cumulativeNum);
        newNum.push(item.newlyAddNum);
      });
      (seriesItem1.name = "累计数量"),
        (seriesItem1.type = "bar"),
        (seriesItem1.stack = "总量"),
        (seriesItem1.label = {
          normal: {
            show: true,
            position: "right",
            textStyle: {
              color: "#40f0c6",
              fontSize: this.$utils.xyText
            }
          }
        }),
        (seriesItem1.data = yData.reverse().slice(1, yData.length));
      // seriesItem1.barWidth = this.$utils.qChartH,//柱图宽度
      (seriesItem1.barMinHeight = 30),
        (seriesItem1.itemStyle = {
          normal: {
            color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
              { offset: 0, color: this.$utils.actualColor },
              { offset: 1, color: this.$utils.actualColor1 }
            ])
          }
        }),
        (seriesItem2.name = "新增数量"),
        (seriesItem2.type = "bar"),
        // seriesItem2.barWidth = this.$utils.qChartH,//柱图宽度
        // seriesItem2.barMinHeight = 100,
        // seriesItem2.stack = '总量',
        (seriesItem2.label = {
          normal: {
            show: true,
            position: "right",
            textStyle: {
              color: "#ffd34e",
              fontSize: this.$utils.xyText
            }
          }
        }),
        (seriesItem2.itemStyle = {
          normal: {
            color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
              { offset: 0, color: this.$utils.planColor },
              { offset: 1, color: this.$utils.planColor1 }
            ])
          }
        }),
        (seriesItem2.data = newNum.reverse().slice(1, newNum.length));
      series.push(seriesItem1, seriesItem2);
      solveData.series = series;
      solveData.xAlisData = xAlisData.reverse().slice(1, xAlisData.length);
      solveData.yData = yData.reverse();
      return solveData;
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.chartsColor = this.$utils.getChartColor(this);
      this.fetchData();
    });
  }
};
</script>
  <style>
.tableHeight {
  height: 100px;
}
</style>
  
  <style scoped>
.week-con {
  margin: 10px;
}

.chart-container {
  display: block;
}
</style>

